<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码功能</title>
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"
          th:href="@{Layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css"
          th:href="@{Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" th:href="@{Layuimini/css/public.css}" media="all">
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title" align="center">
                    <legend>二维码生成</legend>
                </fieldset>

                <div align="center">

                    <div class="layui-inline" style="height: 360px;">
                    <!--    <label class="layui-form-label">范围</label>-->
                        <div class="layui-input-inline"  style="width: 200px;">
                            <input type="text" id="text" value="http://124.223.50.48/index"  placeholder="请输入二维码信息!"  class="layui-input">
                        </div>

                        <div class="layui-input-inline" >
                            <button id="button" class="layui-btn layui-btn-xs" >生成二维码</button>
                        </div>

                        <div class="layui-input-inline" >
                            <button id="resetBtn" class="layui-btn layui-btn-warm layui-btn-xs" >重置</button>
                        </div>
                    <br><br>

                        <div id="qrcode" ></div>
                    </div>

                </div>

            </div>
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title" align="center">
                    <legend>二维码解析</legend>
                </fieldset>
                <div>

                    <div align="center" style="height: 360px;">
                        <input type="file" id="newfile" onchange="changepic(this)"></br></br>
                        <img src="QRcode/jx.png" id="img" style="width: 256px;height: 256px;" />
                        </br>
                        <h3 id="info" style="display: none"><span id="spantitle" style=""></span></h3>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>
<script src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="QRcode/qrcode.js" th:src="@{QRcode/qrcode.js}" charset="utf-8"></script>
<script src="QRcode/reqrcode.js" th:src="@{QRcode/reqrcode.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>

<script>

    // 解析
    var newfile = document.getElementById('newfile');
    var getObjectURL = function (file) {
        var url = null;
        document.getElementById("spantitle").innerHTML ="";
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }


    newfile.onchange = function () {
        // 显示图片
        var reads = new FileReader();
        f = document.getElementById('newfile').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            document.getElementById('img').src = this.result;
            $("#img").css("display", "block");
        };
        //   console.log(newfile[0]);
        console.log(getObjectURL(this.files[0]));// newfile[0]是通过input file上传的二维码图片文件
        qrcode.decode(getObjectURL(this.files[0]));
        qrcode.callback = function (imgMsg) {

            if(imgMsg=="error decoding QR Code"){
                var divA = document.getElementById("spantitle");
                divA.innerHTML = "无法解析该二维码信息!";
                $("#info").attr("style", "dispaly:block;");
                $("#spantitle").attr("style", "color: red");
            }else{
                // 获取地址传给span
                var divA = document.getElementById("spantitle");
                //返回的中文imgMsg乱码,调用以下方法显示正确中文
                // console.log(decodeStr(imgMsg));

                divA.innerHTML = divA.innerHTML+ "二维码解析信息为:"+decodeStr(imgMsg);

                $("#info").attr("style", "dispaly:block;");
                $("#spantitle").attr("style", "color: #00cc00");
            }

        }
    }


    function decodeStr(str) {
        var out, i, len, c;
        var char2, char3;
        out = "";
        len = str.length;
        i = 0;
        while (i < len) {
            c = str.charCodeAt(i++);
            switch (c >> 4) {
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                    // 0xxxxxxx
                    out += str.charAt(i - 1);
                    break;
                case 12:
                case 13:
                    // 110x xxxx 10xx xxxx
                    char2 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                    break;
                case 14:
                    // 1110 xxxx 10xx xxxx 10xx xxxx
                    char2 = str.charCodeAt(i++);
                    char3 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x0F) << 12) |
                        ((char2 & 0x3F) << 6) |
                        ((char3 & 0x3F) << 0));
                    break;
            }
        }
        return out;
    }

</script>

<script type="text/javascript">

    $("#qrcode").on({
        mouseenter: function () {
            var that = this;
            tips = layer.tips("<span style='color: #000;'>右键[图片另存为],可下载保存图片!</span>",
                that, {tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500});
        },
        mouseleave: function () {
            layer.close(tips);
        }
    });



    var qrcodesc = new QRCode("qrcode");
    // 生成二维码的方法
    function makeCode () {
        //该方法提取出来后悔导致解析方法错误
        //var qrcode = new QRCode("qrcode");
        // 二维码地址
        var Url = document.getElementById("text");
        if (!Url.value) {
          // layer.alert("请输入生成二维码的地址!");
            layer.tips("请输入要生成二维码的信息!", "#text", {tips: 1});
            Url.focus();
            return;
        }
        qrcodesc.makeCode(Url.value);
    }
    makeCode();
    // 点击生成二维码
    $("#button").
    on("click", function () {
       // $("#qrcode").empty();
        makeCode();
    })

    $("#resetBtn").on("click", function () {
        window.location.reload();
    })

</script>
</body>
</html>